<template>
    <div>
        <home-header></home-header>
        <home-sidebar></home-sidebar>
        <div class="content-box" :class="{'content-collapse':collapse}">
            <home-tags></home-tags>
            <div class="content">
                <!-- <transition name="move" mode="out-in"> -->
                <router-view />
                <!-- </transition> -->
            </div>
        </div>
        <home-bottom></home-bottom>
    </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeSidebar from "./components/Sidebar";
import HomeTags from "./components/Tags";
import HomeBottom from "./components/Bottom"
export default {
  components: { HomeHeader, HomeSidebar, HomeTags, HomeBottom},
  computed: {
    collapse() {
      return this.$store.state.collapse;
    }
  }
};
</script>

<style scoped>
.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 81px;
  bottom: 30px;
  overflow-y: scroll;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background-color: #f9f9f9;
}
.content {
  padding: 20px;
}
.content-collapse {
  left: 65px;
}
</style>
